<template>
	<div class="auto-scroll-view">
		<div class="scroll-header">
			<div 
				:style="{
					width:item.grow?'10px':(item.width?item.width:'auto'),
					flexGrow:item.grow?item.grow:'initial',
					flexShrink:item.grow?'initial':'0',
					justifyContent:item.align?item.align:'flex-start'
				}" 
				v-for="(item,index) in columns" 
				:key="'list-header-cell-'+index">
				{{item.label}}
			</div>
		</div>
		<!-- list body start -->
		<div class="scroll-body">
			<auto-scroll :step-speed="$config.base.screen.warehouseLogistics.scrollSpeed">	
				<div class="no-data" v-if="dataSource.length===0">暂时没有信息！</div>
				
				<template v-else>
					<div class="scroll-body-row" v-for="(scope,indexA) in dataSource" :key="'scroll-body-row-'+indexA">
						<span 
							:style="{
								width:columnItem.grow?'10px':(columnItem.width?columnItem.width:'auto'),
								flexGrow:columnItem.grow?columnItem.grow:'initial',
								flexShrink:columnItem.grow?'initial':'0',
								justifyContent:columnItem.align?columnItem.align:'flex-start'
							}" 
							v-for="(columnItem,indexB) in columns" 
							:key="'list-body-cell-'+indexB"
						>
							<div class="ellipsis">{{scope[columnItem.name]}}</div>
						</span>
					</div>
				</template>
				
			</auto-scroll>	
		</div>
		<!-- list body end -->
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import AutoScroll from '@/components/AutoScroll.vue'

const $config = inject('$config')
const props = defineProps({
	dataSource:{
		type:Array,
		default:function(){
			return []
		}
	}
})

const columns = ref([
	{
		label:'项目编号',
		name:'projectCode',
		grow:3
	},
	{
		label:'规格',
		name:'specificationModel',
		grow:5
	},
	{
		label:'数量',
		name:'deliveryQuantity',
		width:'3.5em',
		align:'center'
	},
	{
		label:'状态',
		name:'receiptQuantity',
		width:'3.5em',
		align:'center'
	}
])
</script>

<style lang="scss" scoped>

</style>